<template>
	<view>
		<li-statistics
			@openPopup="openPopup"
			fn="GetRechargeConsume"
			:param.sync="param"
			:pageData.sync="pageData"
			:isLoaded.sync="isLoaded"
			:maxRange="7"
			v-on:afterLoaded="afterLoaded($event)"
		>
			<template #li>
				<block v-if="isLoaded">
					<li-statistics-cards
						:cd="[
							{
								type: 1,
								list: [
									{
										text: `储值汇总(元)`,
										value: pageData.allAmount.toFixed(2)
									},
									{
										text: `储值合计(元)`,
										value: pageData.rechargeAllAmount.toFixed(2)
									}
								]
							},
							{
								type: 2,
								list: [
									{
										text: `储值金额`,
										value: pageData.rechargeAmount.toFixed(2)
									},
									{
										text: `赠送金额`,
										value: pageData.giftAmount.toFixed(2)
									},
									{
										text: `消费合计(元)`,
										value: pageData.consumeAllAmount.toFixed(2)
									}
								]
							},
							{
								type: 2,
								list: [
									{
										text: `储值余额消费`,
										value: pageData.rechargeAmount.toFixed(2)
									},
									{
										text: `赠送余额消费`,
										value: pageData.giftConsumeAmount.toFixed(2)
									}
								]
							}
						]"
					/>
					<li-statistics-chart v-show="!isShowCanvas" title="充值" type="line" :cd="chartData" />
					<li-statistics-chart v-show="!isShowCanvas" title="消费" type="line" :cd="chartData2" />
				</block>
			</template>
		</li-statistics>
	</view>
</template>

<script>
import date from '@/utils/date';
import liStatisticsMixin from '../../../mixins/liStatisticsMixin';

export default {
	mixins: [liStatisticsMixin],
	data() {
		return {
			isLoaded: false,
			pageData: {},
			chartData2: {},
			param: {
				dataTimeRange: [date.getDate(-6), date.getToday()]
			},
			opts: {
				padding: [15, 6, 0, 6],
				enableScroll: false,
				legend: { show: false },
				xAxis: {
					disableGrid: true,
					fontSize: 12,
					rotateLabel: true,
					marginTop: 10
				},
				yAxis: {
					data: [
						{
							min: 0
						}
					]
				},
				extra: {
					column: {
						type: 'group',
						width: 30,
						activeBgColor: '#000000',
						activeBgOpacity: 0.08,
						seriesGap: 5,
						barBorderRadius: [6, 6, 6, 6]
					},
					markLine: {
						data: []
					}
				}
			}
		};
	},
	methods: {
		afterLoaded: function (e) {
			let ecData = {
				categories: e.trend.map((item) => item.name),
				series: [
					{
						name: '',
						data: e.trend.map((item) => item.dayIn)
					}
				]
			};
			this.chartData = JSON.parse(JSON.stringify(ecData));

			let ecData2 = {
				categories: e.trend.map((item) => item.name),
				series: [
					{
						name: '',
						data: e.trend.map((item) => item.dayConsume)
					}
				]
			};
			this.chartData2 = JSON.parse(JSON.stringify(ecData2));
		}
	}
};
</script>

<style lang="scss" scoped>
.item {
	border-radius: 8px;
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 20rpx;
	background-color: #fff;
}

.charts-box {
	width: 100%;
	height: 300px;
}

.sub-title {
	font-size: 18px;
	font-weight: bold;
	margin: 8px 0;
}
</style>
